<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>临安区保障性用房数据驾驶舱</title>
  <link href="css/reset.css" rel="stylesheet">
  <!-- <link rel="stylesheet" href="css/house.css"> -->
  <link href="css/cockpit.css" rel="stylesheet">
  <link href="css/left.css" rel="stylesheet">
  <link href="css/middle.css" rel="stylesheet">
  <link href="css/right.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
  <script src="js/lib/jquery.min.js"></script>
  <script src="js/ajaxSet.js"></script>
</head>
<body>
<div id="container" style="background:black">
  <div class="loading" id="loadingBox">
    <span></span><span></span><span></span><span></span><span></span>
  </div>

  <div class="screen-container-wrapper container-box-left">
    <div class="left-box0" id="Date"></div>
    <div class="left-box4"  style="height: 313px;margin-top:24px">
      <header class="screen-sub-title">
        保障性用房总体情况统计
      </header>
      <ul class="blue table-header">
        <li>房源类型</li>
        <li>房源总量套(间)</li>
        <li>分布小区(个)</li>
        <li>已配租量套(间)</li>
        <li>配租率</li>
      </ul>
      <div id="leftBox4Inner" class="left-box4-overflow"></div>
      <div id="leftBox4Fixed" class="left-box4-fixed"></div>
    </div>

    <div class="left-box6">
      <header class="screen-sub-title1" style="margin-bottom:23px">
        <p>各类房源小区分布TOP.3</p>
        <div class="left-box-select">
          <div id="leftSelect6"></div>
        </div>
      </header>
      <ul class="top-list">
        <li>
          <span><b class="box6-no">No.1</b><span class="box6-name">--</span></span>
          <span class="box6-much">0间</span>
        </li>
        <li>
          <span><b class="box6-no box6-no2">No.2</b><span class="box6-name">--</span></span>
          <span class="box6-much">0间</span>
        </li>
        <li>
          <span><b class="box6-no box6-no3">No.3</b><span class="box6-name">--</span></span>
          <span class="box6-much">0间</span>
        </li>
      </ul>
    </div>

    <div class="left-box5">
      <header class="screen-sub-title1" style="margin-bottom:23px">
        <p>房屋年均单位租金统计</p>
        <div class="left-box-select">
          <div id="leftSelect1"></div>
        </div>
      </header>
      <ul class="left-box3-inner">
        <li>
          <h1><b>￥ <span class="weight" id="yearAvgCompanyRent1">28</span>
            /
            <samll>㎡</samll>
          </b></h1>
          <p>公(廉)租房</p>
        </li>
        <li>
          <h1><b>￥ <span class="weight" id="yearAvgCompanyRent2">22</span>
            /
            <samll>㎡</samll>
          </b></h1>
          <p>保障性租赁住房</p>
        </li>
        <li>
          <h1><b>￥ <span class="weight" id="yearAvgCompanyRent3">35</span>
            /
            <samll>㎡</samll>
          </b></h1>
          <p>人才房</p>
        </li>
      </ul>
    </div>
    <div class="left-box3" style="margin-top:3px">
      <header class="screen-sub-title" style="height: 35px">
        售价统计
      </header>
      <ul class="left-box3-inner">
        <li class="double special">
          <h1><b>￥ <span class="weight" id="sellingStatistics1">12000</span>
            /
            <samll>㎡</samll>
          </b></h1>
          <p>安置房(限价房)</p>
        </li>
        <li class="double special">
          <h1><b>￥ <span class="weight" id="sellingStatistics2">13000</span>
            /
            <samll>㎡</samll>
          </b></h1>
          <p>共有产权房</p>
        </li>
      </ul>
    </div>
  </div>
  <div class="screen-container-wrapper container-box-middle">
    <div class="middle-inner">
      <div class="middle-title" style="">
        <img src="img/house_title_bg.png" width="100%" />
        <div class="middle-title-text">
          临安区保障性用房数据驾驶舱
        </div>
      </div>

      <div class="middle-box1">
        <dl>
          <dt><span class="title">房源总量:</span><strong class="weight"
                                                      id="houseTotalCount">0</strong><b>套</b>
          </dt>
          <dd class="middle-inner1">
            <p>已配租量: <span class="white weight" id="hasRentTotalCount">0</span><small>套</small>
            </p>
            <!-- <p>可配租量: <span class="white weight" id="canRentTotalCount">0</span><small>套</small></p> -->
          </dd>
          <dd class="top-progress-bar">
            <div class="top-progress-bg bg-white"></div>
            <div class="top-progress bg-blue" id="hasRentTotalCountRate" style="width:50%"></div>
          </dd>
        </dl>
        <dl>
          <dt><span class="title">分布小区个数:</span><strong class="weight"
                                                        id="communityTotalCount">0</strong><b>个</b>
          </dt>
          <dd class="middle-inner1">
            <p>可配租量: <span class="white weight" id="canRentTotalCount">0</span><small>套</small>
            </p>
            <!-- <p>当前服务人数: <span class="white weight" id="currentServiceNumber">0</span><small>人</small></p> -->
            <!-- <p>服务总数: <span class="white weight">0</span><small>套</small></p> -->
          </dd>
          <dd class="top-progress-bar">
            <div class="top-progress-bg"></div>
            <div class="top-progress bg-orange" id="currentServiceNumberRate" style="width:50%">
            </div>
          </dd>
        </dl>
      </div>
      <div class="middle-box2">
        <div class="middle-box2-inner">
          <div class="middle-map-wrapper">
            <div class="middle-map-back" id="middleBack" style="display: none">返回</div>
            <div class="middle-map" id="middleMap"></div>
            <div class="middle-label-bg"></div>
          </div>
          <div class="middle-light">
            <div class="middle-light-inner">
              <div class="container">
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
                <div class="circle-container">
                  <div class="circle"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="middle-circle-wrapper">
            <div class="middle-circle">
              <div id="middleCircleChartBox"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="middle-box3">
        <div class="middle-box3-inner">
          <header class="screen-sub-title3">
            服务人员统计
          </header>
          <div class="middle-box3-part1">
            <header class="screen-sub-title4">
              性别统计
            </header>
            <ul>
              <li class="boy-part">
                <b id="sexStatistics1">30%</b>
                <h1></h1>
              </li>
              <li class="girl-part">
                <b id="sexStatistics2">70%</b>
                <h1 class="pink"></h1>
              </li>
            </ul>
            <h5>
              <i class="boy"></i><b class="mr15">男性</b>
              <i class="girl pink"></i><b>女性</b>
            </h5>
          </div>
          <div class="middle-box3-part2">
            <header class="screen-sub-title4">
              年龄统计
            </header>
            <div class="age-progress-bar">
              <div class="age-progress-bg"></div>
              <div class="age-progress age-cyan1 first" id="ageStatistics1" style="width:15%">
                <span class="age-font">15</span>
              </div>
              <div class="age-progress age-blue1" id="ageStatistics2" style="width:57%">
                <span class="age-font">57</span>
              </div>
              <div class="age-progress age-orange1" id="ageStatistics3" style="width:27%">
                <span class="age-font">27</span>
              </div>
              <div class="age-progress age-purple1" id="ageStatistics4" style="width:23%">
                <span class="age-font">23</span>
              </div>
              <div class="age-progress age-pink1" id="ageStatistics5" style="display:none">
                <span class="age-font">0%</span>
              </div>
            </div>
            <h5>
              <i class="age-cyan1"></i><b class="mr15">35-45周岁</b>
              <i class="age-blue1"></i><b class="mr15">25-35周岁</b>
              <i class="age-orange1"></i><b class="mr15">18-25周岁</b>
              <i class="age-purple1"></i><b class="mr15">儿童 </b>
              <i class="age-pink1" id="ageOtherBox1" style="display:none"></i><b id="ageOtherBox2" style="display:none" class="mr15">其他 </b>
            </h5>
          </div>
          <div class="middle-box3-part3">
            <header class="screen-sub-title4">
              籍贯分布Top.3
            </header>
            <div class="middle-box3-part3-inner" id="provinceStatistics">
              <dl>
                <dt>No.1</dt>
                <dd class="part3-info age-blue1">
                  <span>0</span>%
                </dd>
                <dd>河南</dd>
              </dl>
              <dl>
                <dt>No.2</dt>
                <dd class="part3-info age-orange1">
                  <span>0</span>%
                </dd>
                <dd>江苏</dd>
              </dl>
              <dl>
                <dt>No.3</dt>
                <dd class="part3-info age-green1">
                  <span>0</span>%
                </dd>
                <dd>广东</dd>
              </dl>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="screen-container-wrapper container-box-right">
    <div class="right-box1" style="height: 310px;margin-bottom: 50px;margin-top:70px">
      <header class="screen-sub-title1">
        <p>项目建设情况</p>
        <div class="right-box-select">
          <div id="rightSelect1"></div>
        </div>
      </header>
      <div class="right-part1-box" id="rightPart1" style="margin-top:20px">
      </div>
    </div>
    <div class="right-box2" style="height: 333px;margin-bottom: 50px">
      <header class="screen-sub-title1">
        <p>保障房年度申报统计</p>
        <div class="right-box-select">
          <div id="rightSelect2"></div>
        </div>
      </header>
      <div class="right-box-select">
        <ul class="right-box2-part  other" id="rightBox2">
          <li>
            <h4 class="other weight" id="houseYearDeclare1">
              0</h4>
            <p>项目数(个)</p>
          </li>
          <li>
            <h4 class="other weight" id="houseYearDeclare2">
              0</h4>
            <p>房源总量(套)</p>
          </li>
          <li>
            <h4 class="other weight" id="houseYearDeclare3">
              0</h4>
            <p>已配租(套)</p>
          </li>
          <li>
            <h4 class="other weight" id="houseYearDeclare4">
              0</h4>
            <p>未配租(套)</p>
          </li>
        </ul>
        <button class="right-search-btn" style="margin-top:26px;">
          查看房源类型
        </button>
      </div>
    </div>
    <div class="right-box3">
      <header class="screen-sub-title1">
        <p>房源供需分析</p>
        <div class="right-box-select">
          <button class="right-select-btn" id="rightSelect3">
            查看供需详情
          </button>
        </div>
      </header>
      <ul class="right-decorate-part">
        <li>
          <h4 class="weight" id="supplyNeedAnalyse1">
            0</h4>
          <p>供应量（套）</p>
        </li>
        <li>
          <h4 class="weight" id="supplyNeedAnalyse2">
            0</h4>
          <p>需求量(套)</p>
        </li>
        <li>
          <h4 class="weight" id="supplyNeedAnalyse3">
            0</h4>
          <p>缺口量(套)</p>
        </li>
      </ul>
    </div>
  </div>

  <div class="dialog-bg" id="dialogBg"></div>
  <!--用display none 重绘时不加载该元素 所以不可用-->
  <div class="screen-container-wrapper light-dialog light-dialog1 hide" id="dialog1" style="visibility: hidden">
    <h2 class="dialog-title-box"><strong id="dialog1Title">保障房年度申报统计</strong>
      <div class="dialog-close"></div>
    </h2>
    <div class="dialog1-box-select">
      <div id="dialog1Select"></div>
    </div>
    <div class="light-dialog-wrapper" id="dialog1Box">
    </div>
  </div>
  <div class="screen-container-wrapper light-dialog hide" id="dialog2" style="visibility: hidden">
    <h2 class="dialog-title-box"><strong id="dialog2Title">街道供需分析</strong>
      <div class="dialog-close"></div>
    </h2>
    <div class="light-dialog-wrapper" id="dialog2Box"></div>
  </div>
</div>

<script src="js/resize.js"></script>
<script src="js/lib/jquery.numscroll.min.js"></script>
<script src="js/lib/echarts.min.js"></script>
<script src="js/linan.js"></script>
<script src="js/锦城街道1.js"></script>
<script src="js/nowDate.js"></script>
<script src="js/lib/SelectBox.min.js"></script>
<script src="js/dialog1_beilun.js"></script>
<script src="js/dialog2_beilun.js"></script>
<!-- <script src="js/dialog3.js"></script> -->
<script src="js/left.js"></script>
<script src="js/right.js"></script>
<script src="js/middleCircle.js"></script>
<script src="js/render.js"></script>
<script>
  $(function() {
    $('#loadingBox').hide();
  })
</script>
</body>
</html>
